<section ng-controller="DiagnosticsController">

    <ol class="breadcrumb">
        <li><a href="#/">home</a></li>
        <li><a href="#/groups">groups</a></li>
        <li><a ng-href="#/groups/{{groupName}}">{{groupName}}</a></li>
        <li><a ng-href="#/groups/{{groupName}}/topics/{{topicName}}">{{topicName}}</a></li>
        <li><a ng-href="#/groups/{{groupName}}/topics/{{topicName}}/subscriptions/{{subscriptionName}}">{{subscriptionName}}</a></li>
        <li class="active">diagnostics</li>
    </ol>

    <h3 ng-if="consumerGroupExists()" style="margin-bottom: 1em;">
        <small>Group Id:</small> {{consumerGroups[0].groupId}}
    </h3>

    <div class="row">
        <div class="col-md-6" ng-repeat="consumerGroup in consumerGroups | orderBy:'clusterName'">
            <div class="panel"
                 ng-class="{
                    'panel-success': isConsumerGroupStable(consumerGroup),
                    'panel-warning': isConsumerGroupDuringRebalance(consumerGroup),
                    'panel-danger': isConsumerGroupUnstable(consumerGroup)}">
                <div class="panel-heading">
                    <h3 class="panel-title">{{consumerGroup.clusterName}} ({{consumerGroup.state}})</h3>
                </div>
                <table class="table">
                    <tr>
                        <th>Topic</th>
                        <th>Partition</th>
                        <th>Current Offset</th>
                        <th>End Offset</th>
                        <th>Lag</th>
                    </tr>
                    <tbody ng-repeat="consumer in consumerGroup.members | orderBy:'host'">
                        <tr>
                            <td colspan="5"><strong>{{consumer.host}}</strong></td>
                        </tr>
                        <tr ng-repeat="partition in consumer.partitions | orderBy:['contentType','partition']">
                            <td>
                                <button ng-click="copyTopicNameToClipboard(partition)"
                                        uib-popover="Copy Kafka topic name to clipboard." popover-placement="top" popover-trigger="mouseenter"
                                        class="btn btn-xs"
                                        ng-class="{
                                            'btn-success': isAvroTopic(partition),
                                            'btn-warning': isJsonTopic(partition),
                                            'btn-danger': !isAvroTopic(partition) && !isJsonTopic(partition)
                                        }">
                                    {{partition.contentType}}
                                </button>
                            </td>
                            <td>{{partition.partition}}</td>
                            <td>{{partition.currentOffset}}</td>
                            <td>{{partition.logEndOffset}}</td>
                            <td>{{partition.lag}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</section>
